<template>
	<view class="selectmeal">
		<view class="longhair">
			<view class="title">请滑动选择头发发质<text></text></view>
			<!-- 堆叠轮播图 -->
			<customSwiper v-on:jieshou='xuangran' class="swiper" :swiper-list="swiperList"></customSwiper>
			<view class="showhair">
				已选：长发
			</view>
		</view>

		<view class="">

		</view>
		<view class="longhair swiper">
			<view class="title">请滑动选择头发发质<text></text></view>
			<!-- 堆叠轮播图 -->
			<customSwiper :swiper-list="swiperList"  />
			<view class="showhair">
				已选：干性发质
			</view>
		</view>

		<!-- 	<view class="txt">
			长发
		</view> -->
		<view class="title swiper">推荐套餐<text></text></view>
		<view class="recommed">
			<view class="box">
				<image src="../../static/首页-全部套餐-选中%20副本_slices/编组%206@2x.png" mode=""></image>
			</view>
			<!-- <view class="icon">
								 		推荐
								 	</view> -->
			<view class="left">
				<image src="../../static/个人中心 副本_slices/编组@2x.png" mode=""></image>
			</view>
			<view class="right">
				<view class="name">
					<text>精选A套餐</text>
					<view class="min">
						20分钟
					</view>

				</view>
				<view class="content">
					精洗A套餐介绍精洗A套餐介绍精洗A套餐介绍精洗A套餐介绍精洗A套餐介绍精洗A套餐介绍精洗A套餐介绍
				</view>
			</view>
		</view>
		<!-- 不满意选择 -->
		<view class="no-agree" @click="noAgree">
			不满意？选择其他
		</view>
		<!-- 协议 -->
		<view class="agree">
			<label class="radio">
				<radio color="#FEDC00" value="r1" :checked="ischeck" @click="liclick" />提交即表示同意</label>
			<navigator url="#" @click="mask">《平台用户协议》</navigator>

		</view>
		<!-- 提交 -->
		<button class="confirm" @click="useing">立即提交</button>
	</view>
</template>

<script>
	import customSwiper from '@/components/blackmonth-swiper/index'
	export default {
		components: {
			customSwiper
		},
		data() {
			return {
				swiperList: [{
					type: '长发',
					url: '../../static/个人中心 副本_slices/编组备份 6@2x.png'
				}, {
					type: '中长发',
					url: '../../static/个人中心 副本_slices/编组备份 7@2x.png',
				}, {
					type: '短发',
					url: '../../static/个人中心 副本_slices/编组@2x.png'
				}],
				ischeck: true,
				isshow: false
			}
		},
		methods: {
			xuangran(data){
				console.log('负战绩',data)
			},
			// 选择勾选协议
			liclick() {
				this.ischeck = !this.ischeck

			},
			index(index){
				this.index = index
				console.log('dddd',index)
			},
			mask() {
				uni.showModal({
					title: '《平台用户协议》',
					content: '这是平台用户协议一个模态弹窗这是一个模态弹窗这是一个模态弹窗这是一个模态弹窗这是一个模态弹窗这是一个模态弹窗这是一个模态弹窗这是平台用户协议一个模态弹窗这是一个模态弹窗这是一个模态弹窗这是一个模态弹窗这是一个模态弹窗这是一个模态弹窗这是一个模态弹窗这是平台用户协议一个模态弹窗这是一个模态弹窗这是一个模态弹窗这是一个模态弹窗这是一个模态弹窗这是一个模态弹窗这是一个模态弹窗这是平台用户协议一个模态弹窗这是一个模态弹窗这是一个模态弹窗这是一个模态弹窗这是一个模态弹窗这是一个模态弹窗这是一个模态弹窗这是平台用户协议一个模态弹窗这是一个模态弹窗这是一个模态弹窗这是一个模态弹窗这是一个模态弹窗这是一个模态弹窗这是一个模态弹窗',
					success: function(res) {
						if (res.confirm) {
							console.log('用户点击确定');
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			noAgree() {
				uni.navigateTo({
					url: '../allmeal/allmeal'
				})
			},
			useing() {
				uni.navigateTo({
					url: "../washHair/washHair"
				})
			}
		}
	}
</script>


<style lang="less">
	.selectmeal {
		padding: 40rpx 30rpx;
		.swiper {
			margin-top: 40rpx;
		}
.showhair{
	font-size: 24rpx;
	
}
		// 推荐
		.no-agree {
			float: right;
			width: 214rpx;
			height: 34rpx;
			font-size: 26rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: rgba(129, 129, 129, 1);
			line-height: 36rpx;
		}

		.recommed {
			position: relative;
			height: 216rpx;
			background: rgba(255, 255, 255, 1);
			box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.1);
			border-radius: 12rpx;
			margin-top: 30rpx;
			margin-bottom: 30rpx;
			width: 690rpx;
			height: 216rpx;
			box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(0, 0, 0, 0.1);
			border-radius: 12rpx;
			display: flex;

			.box {
				position: absolute;
				top: 0;
				right: 0;

				image {
					width: 88rpx;
					height: 84rpx;

				}
			}

			// .box {
			// 	position: absolute;
			// 	top: -64rpx;
			// 	right: -64rpx;
			// 	width: 0;
			// 	height: 0;
			// 	border: 64rpx solid;
			// 	border-color: transparent transparent #3C81DE transparent;
			// 	transform: rotate(45deg);

			// 	&::after {
			// 		content: '推荐';
			// 		display: inline-block;
			// 		width: 500rpx;
			// 		height: 200rpx;
			// 		position: relative;
			// 		font-size: 25rpx;
			// 		top: 20rpx;
			// 		left: -19rpx;
			// 		color: #fff;
			// 	}
			// }
		}

		.left {
			width: 180rpx;

			image {
				width: 180rpx;
				height: 216rpx;
				background: rgba(216, 216, 216, 1);
			}
		}

		.right {
			padding: 24rpx 16rpx;
			flex: 1;
			width: 178rpx;
			height: 52rpx;
			font-size: 38rpx;
			font-weight: 400;
			background-color: rgba(255, 255, 255, 1);

			.name {
				display: flex;
				margin-bottom: 10rpx;
			}

			.min {
				margin-left: 12rpx;
				width: 112rpx;
				height: 40rpx;
				line-height: 40rpx;
				text-align: center;
				border-radius: 22rpx;
				font-size: 22rpx;
				color: rgba(255, 174, 0, 1);
				background: rgba(255, 246, 193, 1);
				border: 2rpx solid rgba(255, 246, 193, 1);
			}

			.content {
				font-size: 26rpx;
				color: rgba(74, 74, 74, 1);
				padding-bottom: 30rpx;
			}

		}

		// 推荐套餐
		.title {
			position: relative;
			height: 60rpx;
			font-size: 42rpx;
			font-weight: 500;
			line-height: 60rpx;
			color: rgba(0, 0, 0, 1);

			// border-bottom: 8rpx solid #FEDC00;   
			text {
				position: absolute;
				width: 80rpx;
				height: 20rpx;
				top: 50rpx;
				left: 0;
				background-color: #FEDC00;
			}
		}


		// 提交
		.agree {
			font-size: 26rpx;
			line-height: 36rpx;
			height: 36rpx;
			display: flex;
			margin-top: 80rpx;

			navigator {
				color: #F0AD4E;
			}

			.navigator {
				position: fixed;
				top: 0;
				left: 0;
				width: 50%;
				height: 50%;
				background-color: #000000;
				opacity: 0.5;
				z-index: 99;
			}
		}

		radio {
			color: yellow;
		}

		// 确定
		.confirm {
			width: 690rpx;
			height: 96rpx;
			backgr ound: #FEDC00;
			border-radius: 12rpx;
			margin-top: 42rpx;
		}

	}
</style>
